<template>
  <!-- 团队案件池-还款弹窗 -->
  <section class="component team-case-repayment" v-loading="loading.state">
    <el-form :model="model" ref="form" :rules="rules" label-width="120px">
      <el-form-item label="案件编号" prop="caseNumber">
        <el-input v-model="model.caseNumber" readonly></el-input>
      </el-form-item>
      <el-form-item label="客户姓名">
        <el-input v-model="model.personalName" readonly></el-input>
      </el-form-item>
      <el-form-item label="欠款金额">
        <el-input v-model="model.overdueAmount" readonly></el-input>
      </el-form-item>
      <el-form-item label="还款金额" prop="repaymentAmount">
        <el-input v-model="model.repaymentAmount" :min="0" :max="model.overdueAmount" type="number" @blur="repaymantMax"></el-input>
      </el-form-item>
      <el-form-item label-width="0px" align="center">
        <el-button @click="close">取消</el-button>
        <el-button @click="ConfirmBtn">确定</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { Getter } from "vuex-class";
import DataForm from "~/components/common/data-form.vue";
import { CaseRepaymentService } from "~/services/domain-service/case-repayment.service";

@Component({
  components: {
    DataForm
  }
})
export default class TeamCaseRepayment extends Vue {
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  private loading: any = {
    state: false
  };

  private model: any = {
    caseNumber: "",
    personalName: "",
    overdueAmount: "",
    repaymentAmount: "",
    id: ""
  };
  private rules:any={
    repaymentAmount:[{required:true,message:"请输入还款金额"},{pattern:/^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,message:'还款金额必须是大于0的数'}]
  }
  /**
   * 重置form表单
   */
  public resetForm() {
    const repaymentForm: any = this.$refs["form"];
    repaymentForm.resetFields();
    this.model.repaymentAmount = "";
  }
  @Emit("close")
  private close() {
    this.resetForm();
  }

  /**
   * 反显数据
   */
  private update(data: any) {
    if (!data.id) return;
    this.model.caseNumber = data.caseNumber;
    this.model.personalName = data.personalName;
    this.model.overdueAmount = data.overdueAmount;
    this.model.id = data.id;
  }

  private repaymantMax(){
    if (this.model.repaymentAmount > this.model.overdueAmount) {
      this.model.repaymentAmount = this.model.overdueAmount
    }
    // if(this.model.repaymentAmount < 0){
    //   this.model.repaymentAmount=0
    // }
  }
  /**
   * 确定按钮
   */
  private ConfirmBtn() {
    const form:any=this.$refs['form']
    form.validate(v=>{
      if(!v) return;
      this.caseRepaymentService.addCaseRepayment(this.model).subscribe(data => {
      this.$message.success("还款成功");
      this.close();
    });
    })
 
  }
}
</script>

<style lang="less" scoped>
</style>